<div class="x-nav">
  <span class="layui-breadcrumb">
    <a>我的账本</a>
    <a><cite>房产报表</cite></a>
  </span>
  <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()"
    title="刷新">
    <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
  </a>
</div>
<div class="layui-row layui-col-space15">
  <div class="layui-col-md12">
    <div class="layui-card">
      <div class="layui-card-body ">
        <form class="layui-form layui-col-space5" lay-filter="formData">
          <div class="layui-input-inline layui-show-xs-block">
            <select name="property" lay-filter="select">
              {foreach $properties as $v}
              <option value="{$v.id}" {if $house_property_id==$v.id}selected{/if}>{$v.name}</option>
              {/foreach}
            </select>
          </div>
        </form>
        <table class="layui-table" id="dataGrid" lay-filter="grid"></table>
      </div>
      <div class="layui-card-body ">
        <ul class="layui-row layui-col-space10 layui-this x-admin-carousel x-admin-backlog">
          <li class="layui-col-md2 layui-col-xs6">
            <a href="javascript:;" class="x-admin-backlog-body">
              <h3>今日到账</h3>
              <p>
                <cite>{$house_info.account}</cite></p>
            </a>
          </li>
          <li class="layui-col-md2 layui-col-xs6">
            <a href="javascript:;" class="x-admin-backlog-body">
              <h3>逾期未处理</h3>
              <p>
                <cite>{$house_info.overdue_todo}</cite></p>
            </a>
          </li>
          <li class="layui-col-md2 layui-col-xs6 ">
            <a href="javascript:;" class="x-admin-backlog-body">
              <h3>逾期未收</h3>
              <p>
                <cite>{$house_info.overdue_uncollected}</cite></p>
            </a>
          </li>
          <li class="layui-col-md2 layui-col-xs6 ">
            <a href="javascript:;" class="x-admin-backlog-body">
              <h3>闲置</h3>
              <p>
                <cite>{$house_info.empty_count}</cite></p>
            </a>
          </li>
          <li class="layui-col-md2 layui-col-xs6">
            <a href="javascript:;" class="x-admin-backlog-body">
              <h3>入住率</h3>
              <p>
                <cite>{$house_info.occupancy}</cite></p>
            </a>
          </li>
          <li class="layui-col-md2 layui-col-xs6">
            <a href="javascript:;" class="x-admin-backlog-body">
              <h3>总房间</h3>
              <p>
                <cite>{$house_info.number_count}</cite></p>
            </a>
          </li>
        </ul>
      </div>
      <div class="layui-card-body ">
        <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
        <div id="main" style="width: 100%;height:310px;"></div>
      </div>
    </div>
  </div>
</div>

<script src="__CDN__/echarts/echarts.min.js"></script>
<script type="text/javascript">
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('main'));

  // 指定图表的配置项和数据
  option = {
    title: {
      text: '年度财务收支走势',
      textStyle: {
        color: '#333333',
        fontWeight: 'normal',
        fontSize: 15,
      }
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      x: 'right', // 'center' | 'left' | {number}, 
      y: 'top', // 'center' | 'bottom' | {number} 
      data: ['收入', '支出', '利润']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: []
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '收入',
        type: 'line',
        data: []
      },
      {
        name: '支出',
        type: 'line',
        data: []
      },
      {
        name: '利润',
        type: 'line',
        data: []
      }
    ]
  };
  $.get('./echar.html?house_property_id=' + {$house_property_id} ).done(function (data) {
    // 填入数据
    myChart.setOption({
      xAxis: {
        data: data.categories
      },
      series: [
        {
          // 根据名字对应到相应的系列
          name: '收入',
          data: data.data.income
        }, {
          name: '支出',
          data: data.data.spending
        }, {
          name: '利润',
          data: data.data.profits
        }
      ]
    });
  });

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);

  layui.use(['table', 'form'],
    function () {
      var form = layui.form;
      // 查询重新加载
      form.on('select(select)', function (data) {
        window.location.href="index.html?house_property_id="+data.value;
      });
    }
  );
</script>